$(function () {
    let action = '/get_video';
    let params = {};
    let append = false;
    let clear = false;
    $('.input-group-btn .dropdown-menu li').on('click', function () {
        action = $(this).data('action');
        $('.input-group-btn .dropdown-toggle').html($(this).text() + " <span class=\"caret\"></span>");
        console.log($(this).data('placeholder'));
        $('#params').attr('placeholder', $(this).data('placeholder'));
        $('#params').attr('name', $(this).data('input'));
        $('.clear').click()
    });
    $('.clear').click(function (e) {
        $('#params').val('');
        $(this).parent().hide();
        $('#params').focus();
    })
    $('#params').on('input', function (e) {
        if (this.value !== '') {
            $('.clear').parent().show();
        } else {
            $('.clear').parent().hide();
        }
    })
    loadPage = function (cursor = 0, _this) {
        if (cursor > 0) {
            append = true;
        } else {
            $('.result').html('');
        }
        $('.tips').html("");
        $('.result').show();
        $('.loading').show();
        params_name = $('#params').attr('name');
        params_value = $('#params').val();
        params[params_name] = params_value;
        params['count'] = 12;
        params['cursor'] = cursor;
        params['web'] = 1;
        params['hd'] = 1;
        if (params_value === '') {
            $('.tips').html("<div class=\"alert alert-danger\" role=\"alert\">input is empty!</div>");
            $('.loading').hide();
            return;
        }
        $.ajax({
            type: "post", url: "/apa/tk" + action, dataType: "json", data: params, success: function (res, status) {
                let dom;
                if (res.code === 1) {
                    dom = generateDom(action, res);
                    if (append) {
                        $(_this).parent().remove();
                        $('.container').append(dom)
                    } else {
                        $('.container').html(dom)
                    }
                } else {
                    $('.tips').html("<div class=\"alert alert-danger\" role=\"alert\">" + res.message + "</div>");
                }
            }, error: function (xhr, errorText, errorType) {
                $('.tips').html("<div class=\"alert alert-danger\" role=\"alert\">" + errorText + "</div>");
            }, complete: function () {
                $('.loading').hide();
            }
        })
    }
    $('.btn-submit').on('click', function () {
        loadPage(0);
    })

    function generateDom(action, res) {
        let str = '';
        switch (action) {
            case '/get_video':
                if (res.data.images) {

                    Object.keys(res.data.images).forEach(function (key) {
                        str += "<a target='_blank' href='" + res.data.images[key] + "'><img rel=\"noreferrer\" style=\"max-height:200px;\" src=\"" + res.data.images[key] + "\"\n" +
                            "                 alt=\"images\"></a>";
                    })
                    var ret = "<div>\n" + str +
                        "        </div>\n" +
                        "        <h4>@" + res.data.author.unique_id + "</h4>\n" +
                        "        <a href='" + res.data.play + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>No Watermark .mp4</a>\n";
                    if (res.data.hdplay) {
                        ret += "        <a href='" + res.data.hdplay + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>No Watermark(HD) .mp4</a>\n";
                    }
                    ret += "        <a href='" + res.data.wmplay + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>Watermark .mp4</a>" +
                        "        <a href='" + res.data.music + "' class=\"btn btn-warning\" target='_blank' rel='noreferrer'>Music .mp3</a>";
                } else {
                    var ret = "<div>\n" +
                        "            <a href='/video/" + res.data.id + ".html' target='_blank'><img rel=\"noreferrer\" style=\"max-height:100px;\" src=\"" + res.data.cover + "\"\n" +
                        "                 alt=\"cover\"></a>\n" +
                        "        </div>\n" +
                        "        <h4>" + res.data.title + "</h4>\n" +
                        "        <h4>@" + res.data.author.unique_id + "</h4>\n" +
                        "        <a href='" + res.data.play + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>No Watermark .mp4 (<span>" + (res.data.size / 1024 / 1024).toFixed(2) + "MB</span>" + ")</a>\n";
                    if (res.data.hdplay) {
                        ret += "        <a href='" + res.data.hdplay + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>No Watermark(HD) .mp4 (<span>" + (res.data.hd_size / 1024 / 1024).toFixed(2) + "MB</span>" + ")</a>\n";
                    }
                    ret += "        <a href='" + res.data.wmplay + "' class=\"btn btn-success\" target='_blank' rel='noreferrer'>Watermark .mp4 (<span>" + (res.data.wm_size / 1024 / 1024).toFixed(2) + "MB</span>" + ")</a>" +
                        "        <a href='" + res.data.music + "' class=\"btn btn-warning\" target='_blank' rel='noreferrer'>Music .mp3</a>";
                }
                return ret;
                break;
            case '/get_hot_video':
                Object.keys(res.data).forEach(function (key) {
                    str += '<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6" style="margin-top:15px;"><a href="/video/' + res.data[key].video_id + '.html" target="_blank"><video preload="none" rel=\"noreferrer\" src="' + res.data[key].play + '" controls="controls" width="135" height="240" poster="' + res.data[key].cover + '"></video></a><br/>@' + res.data[key].author.unique_id + '<br/>' + '<a href=' + res.data[key].music + ' class="btn btn-warning" target="_blank">Music .mp3</a>' + '</div>';
                })
                return str;
                break;
            case '/get_user_video':
            case '/get_music':
            case '/get_search':
                let obj = res.data.videos
                Object.keys(obj).forEach(function (key) {
                    str += '<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6" style="margin-top:15px;"><a href="/video/' + obj[key].video_id + '.html" target="_blank"><video preload="none" rel=\"noreferrer\" src="' + obj[key].play + '" controls="controls" width="135" height="240" poster="' + obj[key].cover + '"></video></a><br/>@' + obj[key].author.unique_id + '<br/>' + '<a href=' + obj[key].music + ' class="btn btn-warning" target="_blank">Music .mp3</a>' + '</div>';
                })
                if (res.data.hasMore) {
                    params['cursor'] = res.data.cursor;
                    str += '<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12" style="margin-top:15px;"><button style="margin:0 auto;" type="button" class="btn btn-success" onclick="loadPage(' + res.data.cursor + ', this)">next page</button></div>';
                }
                return str;
                break;
        }
    }
})
